<template>
    <div class="container">
        <!-- :style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性： -->
        <div class="bbb" :style="{
            height: currentHeight + 'px',
            width: currentwidth + 'px',
            fontSize: currentSize + 'px'
        }">
            <span>金箍棒</span>
        </div>
        <div>
            <button @click="currentHeight += 10">长</button>
            <button @click="currentHeight -= 10">短</button>
        </div>
        <div>
            <button @click="currentwidth += 10">粗</button>
            <button @click="currentwidth -= 10">细</button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const currentHeight = ref(100)
const currentwidth = ref(100)
const currentSize = ref(20)

</script>

<style scoped>
.container {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(236, 236, 236);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}

.bbb {
    background: linear-gradient(to right, rgb(220, 34, 34), yellow);
    border-radius: 10px;
}
</style>